import GridItem from "./grid-item";

import { ECharts, EChartsOption, init } from "echarts";
import { onMounted, ref } from "vue";
import { VxeColumn, VxeTable } from "vxe-table";
const option: EChartsOption = {
	xAxis: {
		type: "value",
		splitLine: {
			lineStyle: {
				color: ["#35373B"]
			}
		},
		axisTick: {
			show: false
		}
	},
	yAxis: {
		type: "value",
		axisLabel: {
			show: true,
			formatter: function (value: number) {
				return ((value / 1000) * 100).toFixed(0) + "%";
			}
		},
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},

		splitLine: {
			lineStyle: {
				color: ["#35373B"]
			}
		},
		show: true
	},
	legend: {
		padding: 2
	},
	grid: {
		left: "7%",
		right: "2%",
		top: 10,
		bottom: 20
	}
};
export default defineComponent({
	name: "TablePanel",
	setup() {
		return () => (
			<div>
				<GridItem
					label="CPU使用率"
					class="absolute"
					style="top: 570px; left: 0px; width: 619px; height: 296px; position: absolute;"
					nosection={true}
				>
					<Table></Table>
				</GridItem>
				<GridItem
					label="内存使用率"
					class="absolute"
					style="top: 570px; left: 627px; width: 619px; height: 296px; position: absolute;"
					nosection={true}
				>
					<Table></Table>
				</GridItem>
				<GridItem
					label="每秒网络带宽使用"
					class="absolute"
					style="top: 570px; left: 1254px; width: 619px; height: 296px; position: absolute;"
					nosection={true}
				>
					<Table></Table>
				</GridItem>
				<GridItem
					label="系统平均负载"
					class="absolute"
					style="top: 874px; left: 0px; width: 619px; height: 296px; position: absolute;"
					nosection={true}
				>
					<Table></Table>
				</GridItem>
				<GridItem
					label="每秒磁盘读写容量"
					class="absolute"
					style="top: 874px; left: 627px; width: 619px; height: 296px; position: absolute;"
					nosection={true}
				>
					<Table></Table>
				</GridItem>
			</div>
		);
	}
});

const Table = defineComponent({
	name: "Table",
	setup() {
		const data: any = [
			247, 113, 137, 247, 155, 181, 119, 215, 287, 114, 218, 289, 205, 226, 162, 173, 153, 206, 277, 172, 166, 253, 252, 205, 288,
			113, 218, 138, 284, 254, 100, 204, 203, 119, 290, 141, 240, 226, 182, 227, 168, 192, 265, 275, 149, 249, 252, 288, 234, 292,
			264, 229, 132, 157, 125, 129, 107, 295, 276, 214, 113, 182, 135, 229, 139, 247, 202, 258, 178, 257, 118, 177, 264, 136, 113,
			123, 262, 251, 192, 270, 103, 152, 111, 288, 173, 215, 258, 108, 141, 132, 263, 218, 204, 145, 112, 102, 218, 127, 131, 180
		];

		let lists = [];
		let count = 0; //初始值为0
		function getTimer(start, Timer, length) {
			for (let j = 0; j < length; j++) {
				count += 1;
				let seconds = Date.parse(start); //标准时间转毫秒数
				let totals = j * Timer * 60 * 1000 + seconds; //固定时间间隔+开始时间的总毫秒数
				let res = new Date(totals).toString().split(" ")[4]; //毫秒数转字符串，截取，取值
				let result = [count, res]; //拼装
				lists.push(result);
			}
			return lists;
		}
		const timeList = getTimer("2024-02-2 15:45:00", 1, data.length);
		data.map((item, index) => {
			data[index] = [index, item];
		});
		const echartsDom = ref<HTMLDivElement>();
		onMounted(() => {
			setTimeout(() => {
				const charEch: ECharts = init(echartsDom.value);
				charEch.setOption(option);
				charEch.setOption({
					xAxis: {
						axisLabel: {
							show: true,
							formatter: function (value, index) {
								return (timeList[index][1] as string).substring(0, 5);
							}
						}
					},
					series: [
						{
							data: data,
							type: "line",
							lineStyle: {
								width: 3
							},
							itemStyle: { opacity: 0 }
						}
					]
				});
				window.addEventListener("resize", () => {
					charEch.resize();
				});
			}, 500);
		});

		interface RowVO {
			id: number;
			name: string;
			role: string;
			sex: string;
			age: number;
			address: string;
		}

		const tableData = ref<RowVO[]>([
			{ id: 10001, name: "Test1", role: "Develop", sex: "Man", age: 28, address: "test abc" },
			{ id: 10002, name: "Test2", role: "Test", sex: "Women", age: 22, address: "Guangzhou" },

			{ id: 10003, name: "Test2", role: "Test", sex: "Women", age: 22, address: "Guangzhou" },

			{ id: 10004, name: "Test2", role: "Test", sex: "Women", age: 22, address: "Guangzhou" }
		]);

		return () => (
			<div>
				<div class="panel-content">
					<div class="panel-height-helper">
						<div class="graph-panel" ng-class="{'graph-panel--legend-right': ctrl.panel.legend.rightSide}">
							<div class="graph-panel__chart" grafana-graph="" ng-dblclick="ctrl.zoomOut()">
								<div
									class="flot-base"
									width="586"
									height="159"
									style="direction: ltr; width: 586px; height: 159.906px;"
									ref={echartsDom}
								></div>
							</div>
							<div ng-if="ctrl.contextMenuCtrl.isVisible" class="px-2 box-border w-[603px] h-[86px] overflow-scroll">
								<VxeTable border max-height={86} row-config="{isHover: true}" auto-resize={true} data={tableData.value}>
									<VxeColumn field="name"></VxeColumn>
									<VxeColumn field="sex" title="min" align="center"></VxeColumn>
									<VxeColumn field="age" title="max"></VxeColumn>
									<VxeColumn field="address" title="avg" show-overflow></VxeColumn>
									<VxeColumn field="address" title="current" show-overflow></VxeColumn>
								</VxeTable>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}
});
